<template>
  <div class="dashboard-container">
    <!-- 第一行 -->
    <div class="row row-first">
      <div class="section section-left">
        <div class="sub-section sub-section-top">
          <!--          <div>生态产品价值占比</div>-->
          <border-title title="生态产品价值占比">
            <pie-chart01/>
          </border-title>
        </div>
        <div class="sub-section sub-section-bottom">
          <border-title title="乡镇GEP排名">
            <barchart01/>
          </border-title>
        </div>
      </div>
      <div class="section section-center">
        <div class="sub-section" style="width: 100%;height: 100%">
          <!--          <div>地图展示</div>-->
          <map-chart01/>
        </div>
      </div>
      <div class="section section-right">
        <div class="sub-section sub-section-top">
          <border-title title="乡镇GEP排名">
            <barchart01/>
          </border-title>
        </div>
        <div class="sub-section sub-section-bottom">
          <border-title title="乡镇GEP排名">
            <barchart01/>
          </border-title>
        </div>
      </div>
    </div>

    <!-- 最后一行 -->
    <div class="row row-last">
      <div class="section">
        <border-title title="乡镇生态产品价值">
          <barchart02/>
        </border-title>
      </div>
      <div class="section">
        <border-title title="乡镇GEP核算数据来源">
          <barchart03/>
        </border-title>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import PieChart01 from "@/modules/dashboard/components/charts/PieChart01.vue";
import Barchart01 from "@/modules/dashboard/components/charts/Barchart01.vue";
import Barchart02 from "@/modules/dashboard/components/charts/Barchart02.vue";
import BorderTitle from "@/modules/dashboard/components/other/BorderTitle.vue";
import Barchart03 from "@/modules/dashboard/components/charts/Barchart03.vue";
// import FormVep from "@/modules/dashboard/components/other/FormVep.vue";
// import PieBarChart from "@/modules/dashboard/components/charts/PieBarChart.vue";

import MapChart01 from "@/modules/dashboard/components/charts/MapChart01.vue";
onMounted(() => {
  console.log('进入 DashboardLayout 页面');
});

onUnmounted(() => {
  console.log('离开 DashboardLayout 页面');
});
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
}

.row-first {
  flex: 7;
}

.row-last {
  flex: 3;

}

.section {
  flex: 1;
  background-color: rgb(228, 14, 14, 0.0);
  color: white;
  padding: 5px;
  margin: 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 调整子部分之间的间距 */
}

.section-center {
  flex: 2;
}
.section-left,
.section-right{
  flex: 1;
}


.sub-section {
  background-color: rgb(228, 14, 14, 0.5);
  /*  background-color: #4a4a4c; */
}
.sub-section-top{
  flex: 2;
}
.sub-section-bottom{
  flex: 3;
}
</style>
